<template>
  <view class="home safe-area-inset-bottom">
    <view class="content">
      <!-- 顶部tab栏 -->
      <view
        class="title"
        :style="
          'height:' +
          header.height +
          'px;' +
          'padding-top:' +
          header.top +
          'px;padding-bottom:6px'
        "
      >
        <text
          @click="tagClick(0)"
          :class="tabIndex == 0 ? 'active title_item home' : 'home title_item'"
          >首页</text
        >
        <text
          @click="tagClick(1)"
          :class="
            tabIndex == 1
              ? 'active title_item recommendation'
              : 'recommendation title_item'
          "
          >推荐</text
        >
        <text
          @click="tagClick(2)"
          :class="
            tabIndex == 2 ? 'active title_item follow' : 'follow title_item'
          "
          >关注</text
        >
      </view>
      <swiper
        :current="tabIndex"
        class="swiper_box"
        :style="
          'height:' +
          swiperBoxHeight +
          'px;' +
          'padding-top:' +
          header.allHeight +
          'px'
        "
        :duration="300"
        @change="ontabchange"
      >
        <!-- 首页 -->
        <swiper-item class="swiper_item">
          <!-- <homeRecommendMain
            v-on:showHello="showHelloAction"
            v-on:showRoseGive="showRoseGiveAction"
            v-on:showAuth="showAuthAction"
            @goCompleteInfo="goCompleteInfo"
            @goCustomizePage="goCustomizePage"
            ref="homeContent"
          /> -->
		  <view>xxxxxxx</view>
		  <view>xxxxxxx</view>
		  <view>xxxxxxx</view>
		  <view>xxxxxxx</view>
		  <view>xxxxxxx</view>
		  <view>xxxxxxx</view>
		  <view>xxxxxxx</view>
        </swiper-item>
        <!-- 推荐 -->
        <swiper-item class="swiper_item">
          <view v-if="!isLogin">
            <view class="login_container">
              <view class="login_btn" @click="toLogin"> 登录 </view>
            </view>
          </view>
          <homeRecommend
            v-else-if="didCustomize"
            v-on:showHello="showHelloAction"
            v-on:showRoseGive="showRoseGiveAction"
            v-on:showAuth="showAuthAction"
          />
          <homeCustomize v-else />
        </swiper-item>
        <swiper-item class="swiper_item">
          <view v-if="!isLogin">
            <view class="login_container">
              <view class="login_btn" @click="toLogin"> 登录 </view>
            </view>
          </view>
          <homeFollow
            v-else
            v-on:showHello="showHelloAction"
            v-on:showAuth="showAuthAction"
            v-on:showRoseGive="showRoseGiveAction"
          ></homeFollow>
        </swiper-item>
      </swiper>
      <!-- 弹框 -->
    </view>
    <helloGiftView
      :giftsData="giftsData"
      :isShow="showHello"
      v-on:dismiss="helloDismissAction"
    ></helloGiftView>
    <roseGiveDialog
      :isShow="showRoseGive"
      v-on:dismiss="showRoseGiveAction"
    ></roseGiveDialog>
    <loginDialog
      :isShow="isShowLogin"
      v-on:dismiss="loginDismiss"
    ></loginDialog>
    <!-- 认证弹框 -->
    <authDialog
      :isShow="showAuth"
      v-on:close="hideAuthAction"
      :userName="userName"
      :avatar="avatar"
    ></authDialog>
    <TabBar :current-page="0" />
  </view>
</template>

<script>
import { EventBus } from "@/util/event-bus.js";
import { loadVipinfo } from "@/api/user/user.js";
import homeRecommend from "./components/home_recommend.vue";
import homeRecommendMain from "./components/home_recommend_main.vue";
import homeCustomize from "./components/home_recommend_customize.vue";
import homeFollow from "./components/home_follow.vue";
import homeRecommendList from "./components/recommend-list.vue";
/// 关注对话框
import helloGiftView from "./components/hello-gift-view.vue";
/// 送花
import roseGiveDialog from "@/pages/home/components/rose-give-dialog.vue";
/// 认证弹框
import authDialog from "@/pages/home/components/auth-dialog.vue";
export default {
  components: {
    homeRecommend,
    homeRecommendMain,
    homeCustomize,
    homeFollow,
    homeRecommendList,
    helloGiftView,
    roseGiveDialog,
    authDialog,
  },
  onHide() {
    EventBus.$emit("videoStop", true);
    loadVipinfo().then((res) => {
      uni.setStorageSync("vipInfo", res.data);
    });
  },
  data() {
    return {
      scrollTop: 0,
      loadStatus: "loading", //加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
      isLoadMore: false, //是否加载中
      header: {
        top: 0,
        height: 0,
        allHeight: 0,
      },
      isShowLogin: false,
      isFirst: false,
      tabIndex: 0,
      didCustomize: false,
      showHello: false,
      showRoseGive: false,
      swiperBoxHeight: 200,
      showAuth: false,
      giftsData: {},
      userName: "",
      avatar: "",
      preIndex: 0,
      noAuth: true,
      isLogin: false,
    };
  },
  created() {
    let that = this;
    const header = uni.getMenuButtonBoundingClientRect();
    console.log("header##### ", header);
    this.header.top = header.top;
    this.header.height = header.height;
    this.header.allHeight = header.top + header.height + 6;
    let isIphoneX = false;
    uni.getSystemInfo({
      success: function (res) {
        let modelmes = res.model;
        if (modelmes.search("iPhone X") != -1) {
          isIphoneX = true;
        }
        that.swiperBoxHeight =
          res.screenHeight -
          that.header.allHeight -
          (res.screenWidth / 750) * 114 -
          (isIphoneX == true ? 34 : 0);
		  console.log("header##### swiperBoxHeight", that.swiperBoxHeight);
		  
      },
    });

    if (uni.getStorageSync("token")) {
      this.isShowLogin = false;
      this.isLogin = true;
    }
    EventBus.$on("didCustomize", function (res) {
      that.didCustomize = true;
      // 修改 已定制
      let userInfo = uni.getStorageSync("userInfo") || {};
      userInfo.customized = true;
      uni.setStorageSync("userInfo", userInfo);
      uni.reLaunch({
        url: "/pages/home2/home",
      });
    });
    EventBus.$on("detailLoginSuccess", function (res) {
      that.isLogin = true;
    });
    // 监听 弹出 登陆
    EventBus.$on("showLogin", function (res) {
      if (that.isLogin === false) {
        that.isShowLogin = true;
      }
    });
  },
  onShareAppMessage(res) {
    console.log(res);
    let userId = res.target.id || "";
    let url = "/pageA/personalHome/personalHome?user_id=" + userId;
    return {
      title: "最近超好玩超火爆的脱单神器,没时间解释啦,快点来看看吧",
      path: url,
    };
  },
  mounted() {
    let userInfo = uni.getStorageSync("userInfo") || {};
    this.didCustomize = userInfo.customized === true;
    let auth = userInfo.certificated || false;
    this.noAuth = auth === false;
  },
  onShow() {
    this.reloadData();
  },
  methods: {
    reloadData() {
      let userInfo = uni.getStorageSync("userInfo") || {};
      this.didCustomize = userInfo.customized === true;
      let auth = userInfo.certificated || false;
      this.noAuth = auth === false;
      this.isLogin = userInfo.codeID != null;
      this.$refs.homeContent.refreshCheckLogin();
    },
    goCompleteInfo() {
      if (!this.isLogin) {
        EventBus.$emit("showLogin");
        return;
      }
      uni.navigateTo({
        url: "/pageA/my-profile/my-profile-once",
      });
    },
    clickLoadMore(e) {
      //   this.moreStatus = e.detail.status;
    },
    goProtocol(type) {
      uni.navigateTo({
        url: "/pageA/protocol/protocol?type=" + type,
      });
    },
    goCustomizePage() {
      this.tagClick(1);
    },
    tagClick(index) {
      if (!uni.getStorageSync("token")) {
        uni.showToast({
          icon: "none",
          title: "请登录",
        });
        this.isShowLogin = true;
        return false;
      }
      if (index === 1) {
        // let userInfo = uni.getStorageSync("userInfo") || {};
        // if (!userInfo.certificated && this.isLogin) {
        //   this.toAuth();
        //   return;
        // }
        // this.toAuth()
        this.reloadData();
      }
      this.tabIndex = index;
      this.preIndex = index;
      if (index != 2) {
        EventBus.$emit("videoStop", true);
      }
    },
    toLogin() {
      this.isShowLogin = true;
    },
    // 关闭弹框
    close_layer() {
      this.isShow = false;
    },
    ontabchange(value) {
      let index = value.detail.current;
      let that = this;
      if (index !== 0) {
        if (this.isLogin) {
          this.tabIndex = index;
          // setTimeout(function () {
          //   that.tabIndex = that.preIndex;
          // }, 100);
        } else {
          this.tabIndex = index;
          this.isShowLogin = true;
        }
      } else {
        this.tabIndex = index;
        this.preIndex = index;
      }
    },
    showHelloAction(giftsData) {
      this.showHello = true;
      this.giftsData = giftsData;
      console.log(`giftsData: `, giftsData);
    },
    helloDismissAction() {
      this.showHello = false;
    },
    hideAuthAction() {
      this.showAuth = false;
    },
    showAuthAction(userInfo) {
      this.showAuth = true;
      this.userName = userInfo.userName;
      this.avatar = userInfo.avatar;
    },
    showRoseGiveAction(show) {
      this.showRoseGive = show;
    },
    beforeSwitch(index) {
      if (!uni.getStorageSync("token")) {
        if (index === 2) {
          this.isShowLogin = true;
          return false;
        }
        return true;
      } else {
        let userInfo = uni.getStorageSync("userInfo") || {};
        if (userInfo.nick_name.length === 0) {
          uni.navigateTo({ url: "/pageA/my-profile/my-profile-once" });
          return false;
        }
        return true;
      }
    },
    toAuth() {
      uni.navigateTo({
        url: "/pageA/realName/realName",
      });
    },
    loginDismiss() {
      this.isShowLogin = false;
    },
  },
};
</script>

<style scoped lang="scss">
* {
  box-sizing: border-box;
}

page {
  background-color: #ffffff;
}

.home {
  height: 100%;

  .content {
    display: flex;
    font-family: PingFangSC-Medium, PingFang SC;
    color: #474a58;
    position: relative;
    height: 100%;
    flex-direction: column;

    .title {
      display: flex;
      position: fixed;
      box-sizing: content-box;
      width: 100%;
      background-color: #ffffff;
      box-shadow: 0 5px 10px -5px rgba(0, 42, 64, 0.07);
      z-index: 100;

      .title_item {
        font-size: 34rpx;
        line-height: 64rpx;
      }

      .home {
        margin-left: 30rpx;
      }

      .recommendation {
        margin-left: 42rpx;
      }

      .follow {
        margin-left: 30rpx;
      }

      .space {
        margin-left: 34rpx;
      }

      .title_item.active {
        font-weight: 600;
        color: rgba(71, 74, 88, 1);
        background: linear-gradient(
          90deg,
          rgba(254, 21, 194, 1) 0%,
          rgba(248, 212, 87, 1) 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        position: relative;
      }

      .title_item.active::after {
        position: absolute;
        bottom: 0;
        left: 50%;
        margin: 0 auto;
        transform: translateX(-50%);
        content: "";
        width: 100%;
        height: 12rpx;
        padding: 0 4rpx;
        background: rgba(254, 21, 194, 1);
        border-radius: 8rpx;
        opacity: 0.2;
      }
    }

    .swiper_box {
      display: flex;
      flex: 1;
      .swiper_item {
        height: 100%;
        .login_container {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 750rpx;
          height: calc(100vh - 50px);
          .login_btn {
            width: 686rpx;
            height: 80rpx;
            background: linear-gradient(
              135deg,
              rgba(252, 79, 145, 1) 0%,
              rgba(253, 108, 230, 1) 100%
            );
            border-radius: 4rpx;
            text-align: center;
            color: #fff;
            line-height: 80rpx;
            margin-bottom: 40rpx;
            margin-top: 10rpx;
          }
        }
      }
    }
  }
}

.safe-area-inset-bottom {
  padding-bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
</style>
